﻿<%@ Page Title="" Language="C#" MasterPageFile="../Shared/Product.Master" Inherits="System.Web.Mvc.ViewPage<Fashion.ViewModels.StoreDetailViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Details
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h3>
        Product Details
    </h3>
    <script type="text/javascript">
            
    </script>

    <script runat="server">
        
    </script>

    <div id="container">
        <div id="products_example">
            <div id="products">
                <div class="slides_container">
                
                 <% foreach (var image in Model.Product.imageList)
                    { %>           
                        <a href="#" target="_blank">
                        <img src="../../../../Content/<%: image %>" alt="<%: Model.Product.ProductName %>" /></a>
                    <% } %>
                </div>
                <ul class="pagination">
                <% foreach (var image in Model.Product.imageList)
                    { %>           
                        <li><a href="#">
                        <img src="../../../../Content/<%: image %>" alt="<%: Model.Product.ProductName %>" /></a></li>
                    <% } %>
                </ul>
            </div>
        </div>
        <div class="rating">
            <img src="/Themes/Default/Content/prod/EmptyStar.png" alt="Star Rating" align="middle"
                id="1" />
            <img src="/Themes/Default/Content/prod/EmptyStar.png" alt="Star Rating" align="middle"
                id="2" />
            <img src="/Themes/Default/Content/prod/EmptyStar.png" alt="Star Rating" align="middle"
                id="3" />
            <img src="/Themes/Default/Content/prod/EmptyStar.png" alt="Star Rating" align="middle"
                id="4" />
            <img src="/Themes/Default/Content/prod/EmptyStar.png" alt="Star Rating" align="middle"
                id="5" />
        </div>
        <table id="one-column-emphasis" summary="Product Details">
            <colgroup>
                <col class="oce-first" />
            </colgroup>
            <tbody>
                <tr>
                    <td>
                        Product Name
                    </td>
                    <td>
                        <%: Model.Product.ProductName %>
                    </td>
                </tr>
                <tr>
                    <td>
                        Brand Name
                    </td>
                    <td>
                        <%: Model.Brand %>
                    </td>
                </tr>
                <tr>
                    <td>
                        Product Price
                    </td>
                    <td>
                        $<%: Model.Product.Price %>
                    </td>
                </tr>
                <tr>
                    <td>Available Colors</td>
                    <td>
                        <% var i = 0;
                            foreach (var color in Model.Colors)
                        { %>
                             <input id="Color_<%: color %>" type="radio" name="colorSelect" value="<%: color %>" onclick="javascript:SizeControl('<%:Model.Sizes[i] %>')" /> 
                             
                             <label for="Color_<%:color %>"><%: color %></label>
                        <% i = i + 1;
                            } %>                        
                        
                    </td>
                </tr>
                <tr>
                    <td>Available Sizes</td>
                    <td>
                    <input id="Size_XS" type="radio" value="XS" name="sizeSelect" disabled/>
                    <label for="Size_XS">XS</label> | 
                      <input id="Size_S" type="radio" value="S" name="sizeSelect" disabled/>
                      <label for="Size_S">S</label> | 
                      <input id="Size_M" type="radio" value="M" name="sizeSelect" disabled/>
                      <label for="Size_M">M</label> | 
                      <input id="Size_L" type="radio" value="L" name="sizeSelect" disabled />
                      <label for="Size_L">L</label> | 
                      <input id="Size_XL" type="radio" value="XL" name="sizeSelect" disabled />
                      <label for="Size_XL">XL</label> | 
                      <input id="Size_XXL" type="radio" value="XXL" name="sizeSelect" disabled class="radio_inactive"/>
                      <label for="Size_XXL">XXL</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Product Rating
                    </td>
                    <td>
                        <%: Model.Product.Rating %>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="Cart" style="display: inline-block; margin-left: 140px;">
            <div class="CheckOut">
                <a id="OrderNow" class="GrayButton" href='#' onclick="return order(<%: Model.Product.ProductID %>)">
                    Order Now</a> 
                <a id="AddCart" class="Button" href='#' onclick="return addCart(<%:Model.Product.ProductID%>)">
                    Add to Cart</a>
            </div>
        </div>
    </div>
</asp:Content>
